<template>
  <!-- 退剩砼转售 -->
  <div>
    <el-dialog title="退剩砼转售" :visible.sync="open" width="1000px" append-to-body destroy-on-close
      :before-close="closeDialog">
      <el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="80px">
        <div>
          <div>降级/同级转售，可降级标号包括：xxxx折行显示</div>
          <div>
            本次发砼含退剩砼xxxx方，主标号xxxx，附加标号xxxx，来自订单编号xxxx
          </div>
        </div>
        <el-card style="margin-top: 10px">
          <el-form-item label="转售至订单" label-width="100px" prop="orderId">
            <div style="display: flex; gap: 20px">
              <el-input :disabled="orderInfo" v-model="form.orderId" placeholder="请粘贴订单编号" />
              <el-button v-if="!orderInfo" @click="getOrders(form.orderId)" type="primary">显示该订单发砼信息</el-button>
              <el-button v-else @click="orderInfo = null" type="primary">重选</el-button>
            </div>
          </el-form-item>
        </el-card>
        <el-card style="margin-top: 10px">
          <el-form-item label="退剩砼车" label-width="100px" prop="tongCar">
            <div style="display: flex; gap: 20px; justify-content: space-between">
              <car v-if="form.tongCar" status="orangecar" :carInfo="form.tongCar"></car>
              <el-button style="height: 36px" type="primary" @click="selectCar('tongPre')">更换</el-button>
            </div>
          </el-form-item>
        </el-card>
        <el-card style="margin-top: 10px" v-if="isBeng">
          <el-row>
            <el-col :span="10" v-if="isBeng">
              <el-form-item label="泵车" label-width="100px" prop="bengPre">
                <div style="display: flex; align-items: center; gap: 20px">
                  <div style="
                      display: flex;
                      max-width: 200px;
                      gap: 20px;
                      overflow-x: auto;
                      overflow-y: hidden;
                    ">
                    <car v-for="(item, index) in form.bengPre" :key="item.id" status="orangecar" :carInfo="item"></car>
                  </div>
                  <el-button type="primary" @click="selectCar('bengPre')" style="height: 36px">更换</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item v-if="isBeng" label="泵送员" label-width="100px" prop="userList">
                <div style="display: flex; gap: 20px">
                  <div style="overflow-x: auto; display: flex; gap: 10px">
                    <span style="white-space: nowrap" v-for="(item, index) in form.userList" :key="item.userInfoId">
                      {{ item.principalName }}
                    </span>
                  </div>
                  <el-button type="primary" @click="selectName">更换</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 10px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="泵浆方量" prop="pumpSlurryVolume">
                <el-input type="" v-model="form.pumpSlurryVolume" placeholder="请填写" />
              </el-form-item>
              <el-form-item label="生产方量" prop="productVolume">
                <el-input type="" v-model="form.productVolume" placeholder="请填写" />
              </el-form-item>
              <el-form-item label="运输方量" v-if="!isPickUp" prop="transVolume">
                <el-input type="" v-model="form.transVolume" placeholder="请填写" />
              </el-form-item>
            </el-col>
            <el-col :offset="3" :span="8">
              <el-form-item label="生产机组" prop="productUnits">
                <el-checkbox-group v-model="form.productUnits">
                  <el-checkbox v-for="item in sysUnitList" :key="item.dictValue" :label="item.dictValue"
                    :value="item.dictValue">{{ item.dictLabel }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 10px" v-if="orderInfo">
          <el-row>
            <el-col :span="11">
              <div>累计发砼</div>
              <div>已生产方量：{{ orderInfo.squareAmount }}</div>
              <div>已运输方量：{{ orderInfo.squareAmount }}</div>
              <div>已发车次：{{ orderInfo.squareAmount }}</div>
            </el-col>
            <el-col :offset="2" :span="11">
              <div>累计泵浆</div>
              <div>已泵浆量：{{ orderInfo.squareAmount }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <div>订单信息</div>
              <div>计划方量：{{ orderInfo.squareAmount }}</div>
              <div>计划开工时间：{{ orderInfo.startTime }}</div>
              <div>部位名称：{{ orderInfo.positionName }}</div>
              <div>主产品标号：{{ orderInfo.primaryDesignatorId }}</div>
              <div>附加产品标号：{{ orderInfo.additionalTitleIds }}</div>
              <div>泵送类型：{{ orderInfo.pumpingId }}</div>
              <div>订单编号：{{ orderInfo.orderNumber }}</div>
            </el-col>
            <el-col :offset="2" :span="11">
              <div>工程信息</div>
              <div>工程名称：{{ orderInfo.engineeringId }}</div>
              <div>施工地点：{{ orderInfo.engineeringId }}</div>
              <div>施工单位：{{ orderInfo.engineeringId }}</div>
              <div>工程ID：{{ orderInfo.engineeringId }}</div>
              <div>现场联系人：{{ orderInfo.engineeringId }}</div>
              <div>运距：{{ orderInfo.engineeringId }}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">签 发</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <SelectCarDialog :dialogVisible="selectCar" @onClose="selectCar = false" @onSubmit="selectTong" /> -->
    <SelectCarDialog :carType="carType" :dialogVisible="selectBengDialogVisible" :multiple="carType === 'bengPre'"
      @onClose="selectBengDialogVisible = false" @onSubmit="submitSelectCar" />
    <SelectNameDialog :dialogVisible="selectNameDialogVisible" :multiple="true"
      @onClose="selectNameDialogVisible = false" @onSubmit="submitSelectName" :userList="form.userList"
      :echoData="form.bengPre" />
  </div>
</template>

<script>
import {
  returnList,
  addData,
  putData,
  addResale,
  getDesignByIds,
} from "@/api/service/production/managementAndResaleOfLeftoverConcrete";
import { getOrders } from "@/api/service/orderCenter/custom";
import car from "@/components/Car";
import SelectCarDialog from "@/components/SelectDialog/SelectCarDialog";
import SelectNameDialog from "@/components/SelectDialog/SelectNameDialog";
export default {
  name: "",
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    sysUnitList: {
      type: Array,
      default: [],
    },
  },
  data () {
    const validatorNumber = (rule, value, callback) => {
      console.log(rule);
      if (Object.is(Number(value), NaN)) {
        callback(new Error("请输入数字"));
      }
      if (+value < 0) {
        callback(new Error("不能为负数"));
      } else {
        callback();
      }
    };
    return {
      isPickUp: false,// 是否自提
      isBeng: true,// 非泵送的订单
      carType: "tongPre", // tongPre bengPre
      selectBengDialogVisible: false,
      selectNameDialogVisible: false,
      row: {},
      form: {
        orderId: '',
        tongCar: "",
        bengPre: [],
        carList: [],
        userList: [],
        pumpSlurryVolume: "",
        productVolume: "",
        transVolume: "",
        productUnits: [],
      },
      rules: {
        orderId: [{ required: true, message: "请输入转售至订单编号", trigger: "blur" }],
        tongCar: [{ required: true, message: "请选择砼车", trigger: "change" }],
        bengPre: [{ required: true, message: "请选择泵车", trigger: "change" }],
        userList: [
          { required: true, message: "请选择泵送员", trigger: "change" },
        ],
        pumpSlurryVolume: [
          { required: true, message: "请填写泵浆方量", trigger: "blur" },
          { validator: validatorNumber, trigger: "blur" },
        ],
        productVolume: [
          { required: true, message: "请输入/累计生产不能超过订单计划方量", trigger: "blur" },
          { validator: validatorNumber, trigger: "blur" },
        ],
        transVolume: [
          { required: true, message: "请输入/累计运输不能超过订单计划方量", trigger: "blur" },
          { validator: validatorNumber, trigger: "blur" },
        ],
        productUnits: [
          { required: true, message: "请选择生产机组", trigger: "change" },
        ],
      },
      orderInfo: null,
    };
  },
  created () { },
  components: {
    car,
    SelectCarDialog,
    SelectNameDialog,
  },
  computed: {},
  watch: {},
  mounted () { },
  methods: {
    selectCar (type) {
      this.carType = type;
      this.selectBengDialogVisible = true;
    },
    submitSelectCar (row) {
      if (this.carType === "tongPre") {
        this.form.tongCar = row;
        this.$refs.form.validateField("tongCar");
      } else {
        this.form.bengPre = row;
        this.$refs.form.validateField("bengPre");
      }
    },
    submitSelectName (row) {
      this.form.userList = row;
    },
    selectName () {
      this.selectNameDialogVisible = true;
    },
    async getOrders (id) {
      if (!id) {
        this.$message({
          message: "请先输入订单号",
          type: "warning",
        });
        return;
      }
      // if (pumpingId) {
      //   this.isBeng = false
      // }
      // if (deliveryTpye != '0') {
      //   this.isPickUp = true
      //   delete this.rules.bengPre
      //   delete this.rules.transVolume
      // }
      const res = await getOrders(id);
      this.orderInfo = res.data;
      // this.row = row;
    },
    closeDialog () {
      this.form = {
        tongCar: "",
        bengPre: [],
        carList: [],
        userList: [],
        pumpSlurryVolume: "",
        productVolume: "",
        transVolume: "",
        productUnits: [],
      };
      this.$emit("update:open", false);
    },
    async submit () {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const params = {
            engineeringId: this.orderInfo.engineeringId,
            // orderId: this.row.id,
            orderId: this.form.id,
            productUnits: this.form.productUnits.join(','),
            carList: this.form.tongCar ? [this.form.tongCar, ...this.form.bengPre] : this.form.bengPre,
            userList: this.form.userList,
            pumpSlurryVolume: this.form.pumpSlurryVolume,
            productVolume: this.form.productVolume,
            transVolume: this.form.transVolume,
          };
         const res = await addResale(params)

          if (res.code === 200) {
            this.$message.warning("转售成功");
            this.$parent.getList;
            this.closeDialog()
          }
        } else {
          this.$message.warning("请检查必填项是否填写");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
